<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model">
        <!-- 主表单区域 -->
        <a-row class="form-row" :gutter="0">
          <a-col :lg="8">
            <a-form-model-item label="工序编号" prop="orderCode">
              <a-input v-model="model.op" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="工序名称">
              <a-input placeholder="请输入订单号" v-model="model.description" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="0">
        </a-row>
      </a-form-model>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="录入信息" key="1" :forceRender="true">

          <j-editable-table
            ref="editableTable1"
            :loading="table1.loading"
            :columns="table1.columns"
            :dataSource="table1.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="false" />
        </a-tab-pane>

      </a-tabs>
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import JDate from '@/components/jeecg/JDate'
import { getRefPromise } from '@/utils/JEditableTableUtil'

export default {
  name: 'QisProcdetailValueList',
  components: {
    JDate
  },
  data() {
    return {
      title: '操作',
      visible: false,
      width: 1600,
      model: {},
      activeKey: '1',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        orderCode: [
          { required: true, message: '订单号不能为空', trigger: 'blur' }
        ]
      },
      table1: {
        loading: false,
        dataSource: [],
        columns: []
      },
      url: {
        list: '/qis/qisProcrecord/detailColumnList',
        dataList: '/qis/qisProcrecord/detailList',
        add: '/test/jeecgOrderMain/add',
        edit: '/test/jeecgOrderMain/edit',
        orderCustomerList: '/test/jeecgOrderMain/queryOrderCustomerListByMainId',
        orderTicketList: '/test/jeecgOrderMain/queryOrderTicketListByMainId'
      }
    }
  },
  created() {
  },
  methods: {
    /** ATab 选项卡切换事件 */
    handleChangeTabs(key) {
      getRefPromise(this, `editableTable${key}`).then(editableTable => {
        editableTable.resetScrollTop()
      })
    },
    add() {
      this.edit({})
    },
    getDataList() {
      getAction(this.url.dataList, null).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.table1.dataSource = res.result.records || res.result
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getColumns() {
      getAction(this.url.list, null).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.table1.columns = res.result.records || res.result
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    open(record) {
      this.model = Object.assign({}, record)
      console.log('监听')
      console.log(this.model)
      this.getColumns()
      this.getDataList()
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      console.log('查看提交值')
      this.$refs.editableTable1.getValues((error, values) => {
        // 错误数 = 0 则代表验证通过
        if (error === 0) {
          this.$message.success('验证通过')
          // 将通过后的数组提交到后台或自行进行其他处理
          console.log(values)
        } else {
          this.$message.error('验证未通过')
        }
      })
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleCancel() {
      this.close()
    },
    addRowCustom() {
      this.orderMainModel.jeecgOrderCustomerList.push({})
      this.$forceUpdate()
    },
    delRowCustom(index) {
      console.log(index)
      this.orderMainModel.jeecgOrderCustomerList.splice(index, 1)
      this.$forceUpdate()
    },
    addRowTicket() {
      this.orderMainModel.jeecgOrderTicketList.push({})
      console.log(this.orderMainModel.jeecgOrderTicketList)
      this.$forceUpdate()
    },
    delRowTicket(index) {
      console.log(index)
      this.orderMainModel.jeecgOrderTicketList.splice(index, 1)
      this.$forceUpdate()
    }

  }
}
</script>

<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** 主表单行间距 */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>
